// 雷达图基础父类组件 - 所有雷达图组件的基类
class BaseRadarChartComponent extends HTMLElement {
    constructor() {
        super();
        
        this.chart = null;
        this.timerId = null;
        this.observer = null;
        
        // 创建Shadow DOM
        const shadow = this.attachShadow({ mode: 'closed' });
        
        // 创建模板
        const template = document.createElement("template");
        template.innerHTML = `
            <style>
               :host {
                    display: block;
                     width: 100%;
                     height: 100%;
                }
                .chart-container {
                    width: 100%;
                    height: 100%;
                    min-width: 600px; /* 最小宽度（拖拽缩小的下限） */
                    min-height: 300px; /* 最小高度（拖拽缩小的下限） */
                }
            </style>
            <div class="chart-container"></div>
        `;
        // 克隆模板内容
        shadow.appendChild(template.content.cloneNode(true));
        
        // 获取图表容器
        const chartDiv = shadow.querySelector('.chart-container');
        
        // 初始化图表实例
        this.chart = echarts.init(chartDiv);
    }
    
    // 监听的属性列表 - 子类可以重写
    static get observedAttributes() {
        return window.getAttributesByType('radar');
    }
    
    // 默认配置 - 雷达图特有配置
    getDefaultConfig() {
        return {
            titleAttrs: [
                ['title-text_text', '雷达图数据'],
                ['title-show_radio', true],
                ['title-left_slider', 'center'],
                ['title-top_slider', 'top'],
                ['title-textalign_select', 'center'],
                ['title-textstyle-color_colorpicker', '#333'],
                ['title-textstyle-fontsize_number', 18],
                ['title-textstyle-fontweight_select', 'bold'],
                ['title-subtext_text', ''],
            ],
            legendAttrs: [
                ['legend-show_radio', true],
                ['legend-bottom_slider', 'bottom'],
                ['legend-left_slider', 'center'],
                ['legend-orient_select', 'horizontal'],
                ['legend-textstyle-color_colorpicker', '#666'],
                ['legend-itemgap_number', 20],
            ],
            radarAttrs: [
                [
                    'radar-indicator_text',
                    '[{"text":"攻击力","max":100},{"text":"防御力","max":100},{"text":"速度","max":100},{"text":"耐力","max":100}]'
                ],
                ['radar-radius_slider', '70%'],
                ['radar-center_array', '50%,50%'],
                ['radar-splitnumber_number', 5],
                ['radar-name-textstyle-color_colorpicker', '#333'],
            ],
            seriesAttrs: [
                ['base-data-url_text', ''],
                ['series-name_text', '数据系列'],
                ['series-type_select', 'radar'],
                ['series-symbol_select', 'circle'],
                ['series-symbol-size_number', 5],
                ['series-line-style-width_number', 2],
                ['series-area-style-opacity_number', 0.2],
                ['series-color_array', "#C1232B,#B5C41F,#FCCE10,#E87C25,#27727B"],
                ['base-echart-init-script_text', ''],
                ['base-echart-timer-script_text', ''],
                ['base-echart-timer_number', 0],
            ]
        };
    }
    
    // 默认颜色方案
    getDefaultColors() {
        return [
            "#C1232B", "#B5C41F", "#FCCE10", "#E87C25", 
            "#27727B", "#FE8463", "#9BCA63", "#FAD860"
        ];
    }

    connectedCallback() {
        // 导入工具函数
        const { buildConfig } = window.attributeUtils;
        const config = this.getDefaultConfig();

        // 生成配置
        const titleConfig = buildConfig(this, config.titleAttrs);
        const legendConfig = buildConfig(this, config.legendAttrs);
        const radarConfig = buildConfig(this, config.radarAttrs);
        const seriesConfig = buildConfig(this, config.seriesAttrs);

        // 解析默认indicator配置
        radarConfig.indicator = JSON.parse(radarConfig.indicator);

        // 调整初始大小
        this.resizeChart();
        // 监听resize事件
        window.addEventListener('resize', this.resizeChart.bind(this));
        // 观察父容器的大小变化
        if (ResizeObserver) {
            this.observer = new ResizeObserver(() => this.resizeChart());
            this.observer.observe(this.parentElement);
        }

        // 处理颜色配置
        if (seriesConfig.color && seriesConfig.color.length <= 1) {
            seriesConfig.color = this.getDefaultColors();
        }

        // 加载数据并渲染图表
        if (seriesConfig.dataUrl) {
            this.loadDataAndRender(seriesConfig, titleConfig, legendConfig, radarConfig);
        } else {
            // 使用默认数据渲染
            this.renderChart(seriesConfig, titleConfig, legendConfig, radarConfig);
        }

        // 执行外部初始化脚本
        if (seriesConfig.echartInitScript) {
            try {
                const scriptContext = this.createScriptContext();
                new Function('ctx', seriesConfig.echartInitScript)(scriptContext);
            } catch (e) {
                console.error('执行初始化脚本错误:', e);
            }
        }

        // 初始化定时器
        if (seriesConfig.echartTimer > 0) {
            this.setTimer(parseInt(seriesConfig.echartTimer) * 1000);
        }
    }

    // 创建脚本执行上下文
    createScriptContext() {
        return {
            component: this,
            chart: this.chart,
            updateData: (url) => this.updateData(url),
            getOption: () => this.chart.getOption(),
            setOption: (opt) => this.chart.setOption(opt)
        };
    }

    // 加载数据并渲染图表
    loadDataAndRender(seriesConfig, titleConfig, legendConfig, radarConfig) {
        fetch(seriesConfig.dataUrl)
            .then(res => {
                if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
                return res.json();
            })
            .then(data => {
                this.renderChart(seriesConfig, titleConfig, legendConfig, radarConfig, data);
            })
            .catch(err => {
                console.error('数据获取失败:', err);
                // 使用默认数据
                this.renderChart(seriesConfig, titleConfig, legendConfig, radarConfig);
            });
    }

    // 渲染图表 - 重点修改：动态处理indicator和数据
    renderChart(seriesConfig, titleConfig, legendConfig, radarConfig, data = null) {
        // 处理数据：获取第一个键对应的数组（支持动态键名，替代固定"销售"）
        let radarData = data;
        if (data && Array.isArray(data) && data.length > 0) {
            // 获取数据中第一个对象的第一个键值对（支持动态键名）
            const firstKey = Object.keys(data[0])[0];
            radarData = data[0][firstKey] || [];
        } else {
            // 使用默认数据
            radarData = this.getDefaultData();
        }

        // 生成series数组
        const series = this.generateSeries(radarData, seriesConfig);

        // 生成indicator：使用数据中的max值（优先）或默认配置
        let indicator = radarConfig.indicator;
        if (radarData.length > 0 && radarData[0].hasOwnProperty('max')) {
            // 从数据中提取indicator（使用name和max）
            indicator = radarData.map(item => ({
                text: item.name,
                max: item.max
            }));
        } else if (typeof indicator === 'string') {
            indicator = JSON.parse(indicator);
        }

        const option = {
            title: {
                show: titleConfig.show,
                text: titleConfig.text,
                left: titleConfig.left,
                top: titleConfig.top,
                textAlign: titleConfig.textalign,
                textStyle: {
                    color: titleConfig.textstyleColor,
                    fontSize: titleConfig.textstyleFontsize,
                    fontWeight: titleConfig.textstyleFontweight,
                },
                subtext: titleConfig.subtext,
            },
            legend: {
                show: legendConfig.show,
                bottom: legendConfig.bottom,
                left: legendConfig.left,
                orient: legendConfig.orient,
                textStyle: {
                    color: legendConfig.textstyleColor
                },
                itemGap: legendConfig.itemgap,
            },
            tooltip: {
                trigger: 'item'
            },
            radar: {
                indicator: indicator,
            },
            series: series
        };
        console.log("雷达图的配置：", JSON.stringify( option))
        this.chart.setOption(option);
    }

    // 生成系列配置 - 适配新数据格式
    generateSeries(radarData, seriesConfig) {
        // 处理雷达图数据格式：从数据项中提取value
        let processedData = [];
        if (Array.isArray(radarData)) {
            processedData = radarData.map((item, index) => ({
                name: item.name || `数据${index + 1}`,
                value: item.value || [],  // 使用数据中的value字段
            }));
        }

        return [{
            name: seriesConfig.name,
            type: 'radar',
            data: processedData,
            color: seriesConfig.color || this.getDefaultColors()
        }];
    }

    // 获取默认指标 - 保持不变
    getDefaultIndicators() {
        return [
            { text: "质量", max: 100 },
            { text: "服务", max: 100 },
            { text: "价格", max: 100 },
            { text: "外观", max: 100 },
            { text: "体验", max: 100 }
        ];
    }

    // 获取默认数据 - 保持不变
    getDefaultData() {
        return [
            {
                name: "产品A",
                value: [80, 85, 90, 75, 88]
            },
            {
                name: "产品B",
                value: [70, 90, 85, 80, 75]
            }
        ];
    }
    
    // 属性变化时更新图表
    attributeChangedCallback(name, oldValue, newValue) {
        if (name && oldValue !== newValue) {
            const currentOptions = this.chart.getOption();
            if (!currentOptions) return;
            
            this.handleAttributeChange(name, newValue, currentOptions);
        }
    }
    
    // 处理属性变化 - 子类可以扩展
    handleAttributeChange(name, value, currentOptions) {
        // 存储更新后的配置（外部函数返回新配置）
        let updatedOptions;

        switch (name) {
            // 系列相关属性
            case 'series-areastyle-color-gradient-show_radio':
                updatedOptions = updateGradientStyle(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-areastyle-show_radio':
                updatedOptions = updateAreaStyle(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-areastyle-color_colorpicker':
                updatedOptions = updateAreaColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-smooth_radio':
                updatedOptions = updateSmooth(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-stack_text':
                updatedOptions = updateStack(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-line-style-width_number':
                updatedOptions = updateLineWidth(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-line-style-color_colorpicker':
                updatedOptions = updateLineColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // 标题相关属性
            case 'title-show_radio':
                updatedOptions = updateTitleVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-text_text':
                updatedOptions = updateTitleText(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textstyle-color_colorpicker':
                updatedOptions = updateTitleStyle('color', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textstyle-fontsize_number':
                updatedOptions = updateTitleStyle('fontSize', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textstyle-fontweight_select':
                updatedOptions = updateTitleFontWeight('title', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textstyle-fontstyle_select':
                updatedOptions = updateTitleStyle('fontStyle', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-subtext_text':
                updatedOptions = updateSubtitleText(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            // 副标题文本颜色
            case 'title-subtextstyle-color_colorpicker':
                updatedOptions = updateSubtitleTextColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-subtextstyle-fontsize_number':
                updatedOptions = updateSubtitleFontSize(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            // 副标题字体粗细
            case 'title-subtextstyle-fontweight_select':
                updatedOptions = updateTitleFontWeight('subtitle', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-subtextstyle-fontstyle_select':
                updatedOptions = updateSubtitleStyle('fontStyle', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-left_slider':
                updatedOptions = updateTitlePosition('left', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-top_slider':
                updatedOptions = updateTitlePosition('top', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-right_slider':
                updatedOptions = updateTitlePosition('right', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-bottom_slider':
                updatedOptions = updateTitlePosition('bottom', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-itemgap_number':
                updatedOptions = updateTitleItemGap(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'title-textalign_select':
                updatedOptions = updateTitleTextAlign(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // 网格相关属性
            case 'grid-left_slider':
                updatedOptions = updateGridPosition('left', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'grid-right_slider':
                updatedOptions = updateGridPosition('right', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'grid-top_slider':
                updatedOptions = updateGridPosition('top', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'grid-bottom_slider':
                updatedOptions = updateGridPosition('bottom', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'grid-containlabel_radio':
                updatedOptions = updateGridContainLabel(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // ======================
            // 图例相关属性
            // ======================
            case 'legend-show_radio':
                updatedOptions = updateLegendVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-left_number':
                updatedOptions = updateLegendPosition('left', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-top_number':
                updatedOptions = updateLegendPosition('top', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-right_number':
                updatedOptions = updateLegendPosition('right', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-bottom_number':
                updatedOptions = updateLegendPosition('bottom', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-textstyle-color_colorpicker':
                updatedOptions = updateLegendTextStyle('color', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-textstyle-fontsize_number':
                updatedOptions = updateLegendTextStyle('fontSize', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-itemwidth_number':
                updatedOptions = updateLegendItemStyle('itemWidth', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-itemheight_number':
                updatedOptions = updateLegendItemStyle('itemHeight', parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-itemgap_number':
                updatedOptions = updateLegendItemGap(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-textstyle-fontweight_select':
                updatedOptions = updateLegendFontWeight(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-textstyle-fontstyle_select':
                updatedOptions = updateLegendTextStyle('fontStyle', value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-orient_select':
                updatedOptions = updateLegendOrientation(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'legend-selectmode_select':
                updatedOptions = updateLegendSelectMode(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // ======================
            // 提示框相关
            // ======================
            case 'tooltip-show_radio':
                updatedOptions = updateTooltipVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-trigger_select':
                updatedOptions = updateTooltipTrigger(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-type_select':
                updatedOptions = updateTooltipAxisPointerType(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-snap_radio':
                updatedOptions = updateTooltipAxisPointerSnap(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-show_radio':
                updatedOptions = updateTooltipAxisPointerLabelVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-color_colorpicker':
                updatedOptions = updateTooltipAxisPointerLabelColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-fontsize_number':
                updatedOptions = updateTooltipAxisPointerLabelFontSize(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-fontweight_select':
                updatedOptions = updateTooltipAxisPointerLabelFontWeight(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-label-fontstyle_select':
                updatedOptions = updateTooltipAxisPointerLabelFontStyle(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-linestyle-color_colorpicker':
                updatedOptions = updateTooltipAxisPointerLineStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-axispointer-linestyle-width_number':
                updatedOptions = updateTooltipAxisPointerLineStyleWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-formatter_text':
                updatedOptions = updateTooltipFormatter(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-backgroundcolor_colorpicker':
                updatedOptions = updateTooltipBackgroundColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-bordercolor_colorpicker':
                updatedOptions = updateTooltipBorderColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-borderwidth_number':
                updatedOptions = updateTooltipBorderWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'tooltip-padding_number':
                updatedOptions = updateTooltipPadding(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // ======================
            // 系列属性
            // ======================
            case 'series-label-show_radio':
                updatedOptions = updateSeriesLabelVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-position_select':
                updatedOptions = updateSeriesLabelPosition(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-distance_number':
                updatedOptions = updateSeriesLabelDistance(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-color_colorpicker':
                updatedOptions = updateSeriesLabelColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-fontsize_number':
                updatedOptions = updateSeriesLabelFontSize(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-fontweight_select':
                updatedOptions = updateSeriesLabelFontWeight(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-fontstyle_select':
                updatedOptions = updateSeriesLabelFontStyle(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-label-formatter_text':
                updatedOptions = updateSeriesLabelFormatter(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-labelline-show_radio':
                updatedOptions = updateSeriesLabelLineVisibility(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-barmaxwidth_slider':
                updatedOptions = updateSeriesBarMaxWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-itemstyle-borderradius_number':
                updatedOptions = updateSeriesItemStyleBorderRadius(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-bargap_text':
                updatedOptions = updateSeriesBarGap(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-barminheight_slider':
                updatedOptions = updateSeriesBarMinHeight(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-showbackground_radio':
                updatedOptions = updateSeriesShowBackground(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-backgroundstyle-color_colorpicker':
                updatedOptions = updateSeriesBackgroundStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-backgroundstyle-bordercolor_colorpicker':
                updatedOptions = updateSeriesBackgroundStyleBorderColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-backgroundstyle-borderwidth_number':
                updatedOptions = updateSeriesBackgroundStyleBorderWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-backgroundstyle-bordertype_select':
                updatedOptions = updateSeriesBackgroundStyleBorderType(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-backgroundstyle-opacity_slider':
                updatedOptions = updateSeriesBackgroundStyleOpacity(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-labelline-linestyle-color_colorpicker':
                updatedOptions = updateSeriesLabelLineStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-labelline-linestyle-width_number':
                updatedOptions = updateSeriesLabelLineStyleWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-itemstyle-color_array':
                updatedOptions = updateSeriesItemStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-itemstyle-bordercolor_colorpicker':
                updatedOptions = updateSeriesItemStyleBorderColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-itemstyle-borderradius_slider':
                updatedOptions = updateSeriesItemStyleBorderRadius(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-barminwidth_slider':
                updatedOptions = updateSeriesBarMinWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-emphasis-itemstyle-shadowblur_number':
                updatedOptions = updateSeriesEmphasisItemStyleShadowBlur(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-emphasis-itemstyle-shadowcolor_colorpicker':
                updatedOptions = updateSeriesEmphasisItemStyleShadowColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-stack_text':
                updatedOptions = updateSeriesStack(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'series-barcategorygap_text':
                updatedOptions = updateSeriesBarCategoryGap(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            case 'legend-itemstyle-color_colorpicker':
                updatedOptions = updateLegendItemStyleColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;

            // 数据相关属性
            case 'base-data-url_text':
                this.updateData(value);  // 保留数据更新逻辑
                break;

            // 定时器相关属性
            case 'echart-timer':
                this.setTimer(parseInt(value) * 1000);  // 保留定时器逻辑
                break;
            case 'echart-timer-script':
                this.echarttimerscript = value;
                this.setTimer(parseInt(this.getAttribute('echart-timer')) * 1000);  // 保留定时器脚本逻辑
                break;

            // ======================
            // 雷达图专属
            // ======================
            case 'radar-indicator_text':
                updatedOptions = updateRadarIndicator(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'radar-axisline-linestyle-width_number':
                updatedOptions = updateRadarAxisLineStyleWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'radar-splitline-linestyle-width_number':
                updatedOptions = updateRadarSplitLineStyleWidth(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'radar-shape_select':
                updatedOptions = updateRadarShape(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'radar-splitnumber_number':
                updatedOptions = updateRadarSplitNumber(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'radar-axisline-linestyle-color_colorpicker':
                updatedOptions = updateRadarAxisLineColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'radar-axisline-linestyle-opacity_number':
                updatedOptions = updateRadarAxisLineOpacity(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'radar-splitline-show_radio':
                updatedOptions = updateRadarSplitLineShow(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'radar-splitline-linestyle-color_colorpicker':
                updatedOptions = updateRadarSplitLineColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'radar-splitline-linestyle-opacity_number':
                updatedOptions = updateRadarSplitLineOpacity(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'radar-indicator_array':
                updatedOptions = updateRadarIndicator(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'radar-name-show_radio':
                updatedOptions = updateRadarNameShow(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'radar-name-textstyle-color_colorpicker':
                updatedOptions = updateRadarNameColor(value, currentOptions);
                this.chart.setOption(updatedOptions);
                break;
            case 'radar-radius_slider':
                updatedOptions = updateRadarRadius(parseInt(value), currentOptions);
                this.chart.setOption(updatedOptions);
                break;


            // 默认情况：未处理的属性
            default:
                console.log(`未处理的属性: ${name}`);
        }
    }

    
    // 组件断开连接时清理资源
    disconnectedCallback() {
        window.removeEventListener('resize', this.resizeChart.bind(this));
        
        if (this.observer) {
            this.observer.disconnect();
        }
        
        clearInterval(this.timerId);
    }
    
    // 调整图表大小
    resizeChart() {
        if (this.chart) {
            this.chart.resize();
        }
    }
    
    // 设置定时器
    setTimer(interval) {
        clearInterval(this.timerId);
        if (interval > 0) {
            this.timerId = setInterval(() => {
                this.executeScript();
            }, interval);
        }
    }
    
    // 执行脚本
    executeScript() {
        const { buildConfig } = window.attributeUtils;
        const seriesConfig = buildConfig(this, this.getDefaultConfig().seriesAttrs);
        
        if (seriesConfig.echartTimerScript) {
            try {
                const scriptContext = this.createScriptContext();
                new Function('ctx', seriesConfig.echartTimerScript)(scriptContext);
            } catch (error) {
                console.log('定时脚本执行错误:', error.message);
            }
        }
    }
    
    // 获取图表实例
    getChartInstance() {
        return this.chart;
    }
    
    // 更新数据
    async updateData(dataurl) {
        try {
            if (!dataurl) {
                throw new Error("数据请求URL不能为空");
            }
            if (!this.chart) {
                throw new Error("图表实例未初始化");
            }
            
            const response = await fetch(dataurl);
            if (!response.ok) {
                throw new Error(`HTTP请求失败: ${response.status}`);
            }
            
            const data = await response.json();
            const { buildConfig } = window.attributeUtils;
            const config = this.getDefaultConfig();
            
            const seriesConfig = buildConfig(this, config.seriesAttrs);
            const titleConfig = buildConfig(this, config.titleAttrs);
            const legendConfig = buildConfig(this, config.legendAttrs);
            const radarConfig = buildConfig(this, config.radarAttrs);

            this.renderChart(seriesConfig, titleConfig, legendConfig, radarConfig, data);
            
        } catch (error) {
            console.error(`数据更新失败: ${error.message}`);
        }
    }
}
export default BaseRadarChartComponent;